<template>
  <div class="gc">
    <!-- 歌曲评论 -->
    <!-- <van-tabs animated> -->
    <van-cell
      is-link
      @click="showPopup"
      name="more-o"
    >打开看看</van-cell>
    <van-popup
      v-model="show"
      get-container="body"
    />
    <van-popup
      v-model="show"
      round
      closeable
      close-icon="close"
      get-container="body"
      position="bottom"
      :style="{ height: '75%' }"
    >
      <!-- 动态传id -->
      <div class="comment">
        <h2>歌曲评论</h2>
        <slot name="hotcomment">
          <div class="praise">
            <h4>精彩评论</h4>
            <van-card
              v-for="item in comhot"
              :key="item.commentId"
              :desc="gettime(item.time)"
            >
              <template #thumb>
                <img
                  :src="item.user.avatarUrl"
                  alt=""
                />
              </template>
              <template #title>
                <div class="aa">
                  <div class="left">
                    <span> {{ item.user.nickname }}</span>
                    <span :class="{ bg: item.user.vipRights }"></span>
                  </div>
                  <div class="right">
                    <span class="cum">{{ item.likedCount }}</span>
                    <van-icon name="good-job-o" />
                  </div>
                </div>
              </template>
              <template #price>
                {{ item.content }}
              </template>
            </van-card>
          </div>
        </slot>
        <slot name="newcomment">
          <div class="praise">
            <h4>最新评论</h4>
            <van-card
              v-for="item in newcom"
              :key="item.commentId"
              :desc="gettime(item.time)"
            >
              <template #thumb>
                <img
                  :src="item.user.avatarUrl"
                  alt=""
                />
              </template>
              <template #title>
                <div class="aa">
                  <div class="left">
                    <span> {{ item.user.nickname }}</span>
                    <span :class="{ bg: item.user.vipRights }"></span>
                  </div>
                  <div class="right">
                    <span class="cum">{{ item.likedCount }}</span>
                    <van-icon name="good-job-o" />
                  </div>
                </div>
              </template>
              <template #price>
                {{ item.content }}
              </template>
            </van-card>
          </div>
        </slot>
        <!-- 发表评论 -->
        <van-field
          v-model="value"
          autosize
          rows="1"
          right-icon="smile-o"
          type="textarea"
          placeholder="听了这么多,可能有你想说"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              @click="postComments"
            >发送</van-button>
          </template>
        </van-field>
      </div>
    </van-popup>
    <!-- 演示,合并的时候可以干掉了 -->
    <!-- <van-tab title="歌单评论" to="/comment/3231649721"></van-tab> -->
    <!-- </van-tabs> -->
  </div>
</template>
<script>
import { getmusicCom } from '@/api/comment'
import { Toast } from 'vant';
export default {
  // 
  props: ['id', 'type'],
  data: () => ({
    show: false,//vant点击从底部出来
    value: '',//发表评论内容
    newcom: [],//最新评论
    comhot: [],//热门评论
    src: null,
  }),
  created() {
    this.getmusicCom()
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    // 获取评论
    async getmusicCom() {
      // console.log(this.id);
      // console.log(this.type);
      const res = await getmusicCom(this.id, this.type)
      console.log(res);
      this.newcom = res.data.comments
      this.comhot = res.data.hotComments
    },
    // 时间戳转化
    gettime(time) {
      return new Date(time).toLocaleString()
    },
    async postComments() {
      // 无关紧要
      // await postComments({ id: this.id, txt: this.vlaue })

      // 发表评论
      if (this.value) {
        this.newcom.unshift({
          content: this.value,
          time: new Date(),
          likedCount: null,
          user: {
            avatarUrl: this.src || 'https://img1.baidu.com/it/u=1153639289,3598981143&fm=26&fmt=auto&gp=0.jpg',
            nickname: sessionStorage.user || 'No.1-Yang'
          }
        })
        this.value = ""
      } else {
        Toast('你什么都还没说呢')
        return
      }
    }
  }
}
</script>
<style lang="less">
.van-cell {
  width: 100% !important;
  padding: 0px 15px !important;
  background: none;
  border-radius: 10px;
  border: 1px solid #fff;
  background-color: transparent !important;
  .van-cell__value--alone {
    color: #fff;
  }
}
 .van-field {
    background: #fff !important;
  }

.comment {
  padding-bottom: 50px;
  h2 {
    padding-left: 20px;
  }
  .van-card {
    background: #f6f6f6;
  }
  .praise {
    h4 {
      padding: 0 10px;
      height: 23px;
      line-height: 23px;
      margin: 0;
      padding: 4px 10px;
      color: #666;
      font-size: 12px;
      font-weight: 400;
      background: rgba(0, 0, 0, 0.05);
    }
    .van-card__thumb {
      height: 60px;
      width: 40px;
      img {
        border-radius: 50%;
        width: 100%;
      }
    }
    .van-card__content {
      min-height: 60px;
    }
    .aa {
      display: flex;
      font-size: 13px;
      justify-content: space-between;
      .left {
        display: flex;
      }
      .right {
        display: flex;
        height: 20px;
        justify-content: space-between;
        .cum {
          font-size: 11px;
          color: #999;
          margin-top: 2px;
          margin-right: 5px;
        }
        .van-icon-good-job-o {
          font-size: 18px;
          color: #ccc;
        }
      }
      .bg {
        display: block;
        margin: 4px;
        width: 32px;
        height: 11px;
        background: url("https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4213923065/dc4e/2b9c/7677/20a6644c6e3a093d7accce919ae7b169.png")
          no-repeat center/100%;
      }
    }
    .van-card__price {
      font-size: 14px;
    }
  }
  // 回复
  // .van-cell {
  //   position: fixed;
  //   bottom: 0px;
  //
  //   .van-icon-smile-o {
  //     font-size: 24px;
  //   }
  // }
}
</style>
